import React, {Component} from 'react'

import {renderRoutes} from 'react-router-config'

import { Layout, Breadcrumb, Icon } from 'antd'
import MenuList from '$components/menuList/menuList'
const { Header, Content, Footer, Sider } = Layout

import './app.less'

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            collapsed: false
        }
    }

    toggle() {
        this.setState({
            collapsed: !this.state.collapsed
        })
    }

    render() {
        return (
            <div className="resume-wrapper">
                <Layout>
                    <Sider
                    trigger={null}
                    collapsible
                    collapsed={this.state.collapsed}
                    >
                        <div className="logo" />
                        <MenuList pathname={this.props.location.pathname} />
                    </Sider>
                    <Layout>
                        <Header className="header">
                            <Icon
                            className="trigger"
                            type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
                            onClick={() => this.toggle()}
                            />
                        </Header>
                        <Content className='content-wrap'>
                            {renderRoutes(this.props.route.routes)}
                        </Content>
                        <Footer className='footer'>Ant Design ©2018 Created by Ant UED</Footer>
                    </Layout>
                </Layout>
            </div>
        )
    }
}

export default App